<template>
  <Form :model="form.data" :label-position="form.labelPosition"
        :label-width="form.labelWidth"
        :rules="ruleValidate" :ref="form.name">
    <Row>
      <Col :span="24/form.colNumber" :key="index" v-for="(item,index) in form.columns">
      <Form-item :label="item.label" :prop="item.name">

        <Input v-model="form.data[item.name]" :type="item.type" :placeholder="item.placeholder"
               v-if="item.type=='text'"></Input>

        <template v-else-if="item.type=='select'">
          <Select v-model="form.data[item.name]" :placeholder="item.placeholder">
            <Option :value="o.value" v-for="(o,index) in item.items" :key="o.index">{{o.name}}</Option>
          </Select>
        </template>

        <template v-else-if="item.type=='radio'">
          <Radio-group v-model="form.data[item.name]">
            <Radio :label="o.label" v-for="(o,index) in item.items" :key="o.index">{{o.name}}</Radio>
          </Radio-group>
        </template>

        <template v-else-if="item.type=='date'">
          <Date-picker type="date" :placeholder="item.placeholder?item.placeholder:'选择日期'"
                       v-model="form.data[item.name]"></Date-picker>
        </template>

        <template v-else-if="item.type=='time'">
          <Date-picker type="time" :placeholder="item.placeholder?item.placeholder:'选择时间'"
                       v-model="form.data[item.name]"></Date-picker>
        </template>

        <template v-else-if="item.type=='checkbox'">
          <Checkbox-group v-model="form.data[item.name]">
            <Checkbox :label="o.label" v-for="(o,index) in item.items" :key="o.index">{{o.name}}</Checkbox>
          </Checkbox-group>
        </template>

        <template v-else-if="item.type=='textarea'">
          <Input type="textarea" :placeholder="item.placeholder?item.placeholder:'请输入...'"
                 v-model="form.data[item.name]" :rows="item.rows"
                 :autosize="{minRows: item.minRows,maxRows: item.maxRows}"
          ></Input>
        </template>
        <template v-else>

        </template>

      </Form-item>
      </Col>
    </Row>
    <Row v-if="form.showOpt">
      <Form-item>
        <Button type="primary" @click="handleSubmit()">提交</Button>
        <Button type="ghost" @click="handleReset()" style="margin-left: 8px">重置</Button>
      </Form-item>
    </Row>
  </Form>
</template>
<script>
  import axios from 'axios'
  import Log from "../../utils/Log";
  import deepExtend from "deep-extend";

  export default{
    name: "UForm",
    props: {
      data: {
        type: Object,
      }
    },
    created(){
      let defaultForm = {
        name: "formName",//表单名称，如果同一个页面存在多个表单时，需要指定不同的名称
        //label对齐方式
        labelPosition: "right",
        //label的宽度
        labelWidth: 80,
        //每行显示的个数
        colNumber: 2,
        //显示操作按钮
        showOpt:true,
        columns: [],
        //表单提交之前（校验之后），返回如果为false,则不继续执行后续操作
        submitBefore: function (data) {
          return true;
        },
        //表单提交之后
        submitAfter: function (response) {
          return true;
        },
        //点击取消时的操作，默认为关闭窗口
        onCancel: function () {

        },
        data: {}//表单提交的参数
      };
      this.form = deepExtend(defaultForm, this.data);
      Log.d("form :%o", this.form);
      //生成表单规则校验
      let ruleValidate = {};
      if (this.form.columns) {
        this.form.columns.forEach((c) => {
          let ruleName = c.name;
          //直接写required的话，采用默认提示规则。写了rule属性则使用rule
          if (c.required && !c.rule) {
            let trigger = "blur";
            //固定的几种类型采用change事件监听
            ["select", "radio", "date", "time", "checkbox"].forEach((type) => {
              if (c.type === type) {
                trigger = "change";
              }
            });
            let rule = {required: true, message: c.label + '不能为空', trigger: trigger};
            ruleValidate[ruleName] = [rule];
          } else {
            //其他自定义格式直接采用原生格式（参见iview组件当中的form表单验证格式）
            ruleValidate[ruleName] = c.rule;
          }
        });
      }
      this.ruleValidate = ruleValidate;
      //针对type为select的数据，进行额外处理
      /*if (this.form.columns) {
          for(let c of this.form.columns){

          }
      }*/

    },
    data(){
      return {
        form: {
          data: {}//表单提交的参数
        },
        //表单规则校验
        ruleValidate: {},
      }
    },
    methods: {
      //模态窗口点击确认按钮事件
      handleSubmit(){
        this.$refs[this.form.name].validate((valid) => {
          if (valid) {
            if (!this.form.submitBefore(this.form.data)) {
              return;
            }
            this.$axios.post(this.form.actionUrl, {data: this.form.data}).then(response => {
              this.$Message.success('提交成功!');
              this.handleReset();
              this.form.submitAfter(response);
            });
          } else {
            this.$Message.error('表单验证失败!');
          }
        });
      },
      //重置表单
      handleReset(){
        this.$refs[this.form.name].resetFields();
      }
    }

  }
</script>
